<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>购物车</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<script src="js/rem.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="css/base.css"/>
	<link rel="stylesheet" type="text/css" href="css/page.css"/>
	<link rel="stylesheet" type="text/css" href="css/all.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/loading.css"/>
	<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
	<script src="js/vue-2.4.0.js"></script>
	<script src="js/axios_v0.12.0.js"></script>

</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
		<div class="loader-inner pacman">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
</div>
<!--loading页结束-->
<body>
<!--header star-->
<header class="mui-bar mui-bar-nav" id="header">
	<a class="btn" href="javascript:history.go(-1)">
		<i class="iconfont icon-fanhui"></i>
	</a>
	<div class="top-sch-box top-sch-boxtwo flex-col">
		购物车
	</div>
	<p class="btn"  onclick="selDelCart()">
		<i  class="iconfont icon-lajixiang"></i>
	</p>
</header>
<!--header end-->

<div class="warp warptwo clearfloat">
	<div id="cartBody" class="shopcar clearfloat">
		<div v-for="(cart,index) in carts" class="list clearfloat fl">
			<div class="xuan clearfloat fl">
				<div class="radio" >
					<label>
						<input  :cid="cart.cid" type="checkbox" class="ckitem"  />
						<div class="option"></div>
					</label>
				</div>
			</div>
			<a href="#">
				<div class="tu clearfloat fl">
					<span></span>
					<img id="image" :src="cart.image+'1_big.png'"/>
				</div>
				<div class="right clearfloat fl">
					<p class="tit over">{{cart.title}}</p>
					<p class="fu-tit over">{{cart.itemType}}</p>
					<p class="jifen over">{{cart.realPrice}}</p>
					<p :id="`goodsCount2`+index" style="display:none">{{cart.num}}</p>
					<div class="bottom clearfloat">
						<div class="zuo clearfloat fl">
							<ul>
								<li :onclick="`reduceNum(`+index+`,`+cart.cid+`)`"><img src="img/jian.png"/></li>
								<li :id="`goodsCount`+index">{{cart.num}}</li>
								<li :onclick="`addNum(`+index+`,`+cart.cid+`)`"><img src="img/jia.png" /></li>
							</ul>
						</div>
						<i :cid="cart.cid" class="iconfont icon-lajixiang fr"></i>
					</div>
				</div>
			</a>
		</div>
	</div>
</div>
</div>

<!--settlement star-->
<div class="settlement clearfloat">
	<div class="zuo clearfloat fl box-s">
		价格合计：<span id="selectTotal">￥0</span>
	</div>
	<a href="#"  onclick="toOrderConfirm()" class="fl db">
		立即结算
	</a>
</div>
<!--settlement end-->

<!--footer star-->
<footer class="page-footer fixed-footer" id="footer">
	<ul>
		<li>
			<a href="index.html">
				<i class="iconfont icon-shouye"></i>
				<p>首页</p>
			</a>
		</li>
		<li>
			<a href="cation.html">
				<i class="iconfont icon-icon04"></i>
				<p>分类</p>
			</a>
		</li>
		<li class="active">
			<a href="shopcar.html">
				<i class="iconfont icon-gouwuche"></i>
				<p>购物车</p>
			</a>
		</li>
		<li>
			<a id="center_link" href="#">
				<i class="iconfont icon-yonghuming"></i>
				<p>我的</p>
			</a>
		</li>
	</ul>
</footer>
<!--footer end-->
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script src="js/mui.min.js"></script>
<script src="js/others.js"></script>
<script src="js/vue-2.4.0.js"></script>
<script type="text/javascript" src="js/hmt.js" ></script>
<script src="slick/slick.js" type="text/javascript" ></script>
<!--插件-->
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.jquery.min.js"></script>
<script type="text/javascript">
	var cartListUrl="../carts/list";
	var delUrl="../carts/remove";
	var delListUrl="../carts/removeList";
	var changeNumUrl="../carts/changeNum"

	$(function (){
		$.get("/users/getUserInfo", function (result) {
			if (result.state == 1000) {
			} else {
				window.location.href = "login.html";
			}
		});

		initCartList()
		$(".loading").addClass("loader-chanage")
		$(".loading").fadeOut(300)

		$("#center_link").click(function (event) {
			event.preventDefault();

			$.post("/users/checkLogin", function (result) {
				if (result.state == 1000) {
					window.location.href = "center.html";
				} else {
					window.location.href = "login.html";
				}
			});
		});


	})

	//初始化购物车
	function initCartList(){
		$.get(cartListUrl,function(result){
			if(result.state==1000){
				new Vue({
					el: '#cartBody',
					data:{
						carts:result.data
					}
				});
				$(".ckitem").bind("click",function() {
					calcTotal();
				})
				initDelButton();
			}else if(result.state==2007){ // 未找到记录
				alert("您还为添加任何商品，促销火热进行中，请到商品页面选购~");
				$("#cartBody").empty();
			}else{
				alert(result.msg);
				$("#cartBody").empty();
			}
		})
	}
	//初始化删除操作
	function initDelButton(){
		$(".iconfont.icon-lajixiang.fr").bind("click",function(){
			var flag=confirm("是否确认删除该记录？");
			if(flag){
				var cid=$(this).attr("cid");
				var params={cid:cid};
				$.post(delUrl,params,function(result){
					if(result.state==1000){
						window.location.href="../shopcar.html";
					}else{
						alert(result.msg);
					}
				});
			}
		});
	}

	//计算总价格的方法
	function calcTotal() {
		//选中商品的数量
		var vselectCount = 0;
		//选中商品的总价
		var vselectTotal = 0;

		//循环遍历所有tr
		for (var i = 0; i < $(".right").length; i++) {
			//计算每个商品的价格小计开始
			//取出1行
			var $tr = $($(".right")[i]);
			var $ck = $($(".ckitem")[i]);
			//取单价
			var vprice = parseFloat($tr.children(":eq(2)").html());
			//取数量
			var vnum = parseFloat($tr.children(":eq(3)").html());

			//小计金额
			var vtotal = vprice * vnum;
			//赋值
			$tr.children(":eq(5)").children("span").html("¥" + vtotal);
			//计算每个商品的价格小计结束

			//检查是否选中
			if ($ck.prop("checked")) {
				//计数
				vselectCount++;
				//计总价
				vselectTotal += vtotal;
			}
			//将选中的数量和价格赋值
		}
		$("#selectTotal").html(vselectTotal);
	}
	//批量删除按钮
	function selDelCart() {
		var cids=[];
		//遍历所有按钮
		for (var i = $(".ckitem").length - 1; i >= 0; i--) {
			//如果选中
			if ($(".ckitem")[i].checked) {
				cids.push($($(".ckitem")[i]).attr("cid"));
			}
		}
		if(cids.length!=0){
			var flag=confirm("请确认是否删除所选记录？");
			if(flag){
				let cid;
				var params={cids:cids.toString()}
				$.post(delListUrl,params,function(result){
					if(result.state==1000){
						window.location.href="../shopcar.html";
					}else{
						alert(result.msg);
					}
				})
			}
		}else {
			alert("未选中任何购物车记录");
		}
	}

	function changeNum(cid,rid,num){
		var params={
			cid:cid,
			num:num
		}
		$.post(changeNumUrl,params,function(result){
			if(result.state==1000){
				console.log(cid+":changeNum:"+num+":success");
				var n = parseInt($("#goodsCount"+rid).html());
				$("#goodsCount"+rid).html(n + num);
				//统一隐藏域中num的数据，方便进行合计操作
				$("#goodsCount2"+rid).html(n + num);
				calcTotal();
			}else{
				alert(result.msg);
			}
		})
	}

	/*按加号数量增*/
	function addNum(rid,cid) {
		// 修改数据库记录
		changeNum(cid,rid,1);
	}
	/*按减号数量减*/
	function reduceNum(rid,cid) {
		var n = parseInt($("#goodsCount"+rid).html());
		if (n <=1)
			return;
		// 修改数据库记录
		changeNum(cid,rid,-1);
	}
	// 跳转订单确认页面的方法
	function toOrderConfirm(){
		var cids=[];
		//遍历所有按钮
		for (var i = $(".ckitem").length - 1; i >= 0; i--) {
			//如果选中
			if ($(".ckitem")[i].checked) {
				cids.push($($(".ckitem")[i]).attr("cid"));
			}
		}
		if(cids.length==0){
			alert("请至少选择1项要结算的商品");
			return;
		}
		// 跳转订单确认页面
		window.location.href="confirm.html?cids="+cids;
	}


</script>
</html>
